import { Box, Stack } from "@mui/material"
import React, { useRef, useState } from "react"
import MemoryCard from "./components/MemoryCard"
import { useRequest } from "ahooks"
import { myMemorys } from "@/services"
import { InfiniteScroll, Loading } from "antd-mobile"
import useInfiniteScroll from "@/hooks/useInfiniteScroll"

export default () => {
  const { runAsync } = useRequest((params) => myMemorys(params), {
    manual: true,
  })
  const [list, hasMore, loadMore] = useInfiniteScroll(async (no, size) => {
    const {
      data: { data, total },
    } = await runAsync({ pageNo: no, pageSize: size })
    return { data, total: total ?? 0 }
  })
  const [currentPlay, setCurrentPlay] = useState<any>()
  return (
    <>
      <Stack spacing={2} sx={{ p: 2, alignItems: "center" }}>
        {list?.map((item: any, index: number) => {
          return (
            <MemoryCard
              value={{
                ...item,
              }}
              onToggle={(value) => {
                setCurrentPlay(value)
              }}
              canPlay={
                !currentPlay ||
                currentPlay?.url ===
                  window.alignConfig.blogSourceMinio + "/musics/" + item.url
              }
              key={index}
            ></MemoryCard>
          )
        })}
        <InfiniteScroll hasMore={hasMore} loadMore={loadMore}></InfiniteScroll>
      </Stack>
    </>
  )
}
